<template>
    <view class="gallery_drawing" >
      <view class="gallery-van-tab-a">
        <view class="gallery-van-tab-aa gallery-van-tab-aa-block" v-for="item in drawingList" style=" margin-left: 10px;" >
         <image src="https://img.yzcdn.cn/vant/cat.jpeg"  style="width: 160px; height: 149px;" @click="showOverlay(item.galleryInfoId)"></image>
          <view class="gallery-van-tab-a-content">
            <view>
              <view align="left" style="font-size: 0.8rem;margin: 0;padding: 0.2rem 0">{{item.galleryInfoTitle}}</view>
            </view>
            <view align="left" class="gallery-van-tab-b-contents">
              <view class="van-tab-b-contents">
                <image round  src="https://img.yzcdn.cn/vant/cat.jpeg" style="position: absolute; width: 20px; height: 20px; border-radius: 50px;"/>
                <text style="font-size: 0.4rem;margin-left: 1.5rem">{{item.shopsName}}</text>
              </view>
              <view class="van-tab-b-contents">
                <van-icon name="like-o" style="position: absolute"/>
                <text class="block-list-likes" style="font-size: 0.8rem;margin-left: 1.2rem">{{item.galleryInfoFabulous}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <van-overlay :show="show" @click="show = false">
        <view class="wrapper" @click.stop>
          <view class="block-text">
            <view class="block-text-share" align="right" style="padding: 0.5rem">
              <van-icon name="share-o" color="#ffffff"/>
            </view>
            <view class="block-text-img">
              <image src="https://img.yzcdn.cn/vant/cat.jpeg" fit="cover"height="12rem" style="width: 100%;"  @click="show = true"></image>
            </view>
            <view class="block-text-content" align="left">
              <view class="block-text-content-p">
                <view>{{this.drawing.galleryInfoText}}</view>
                <view @click="toText()">查看原文 ></view>
              </view>
              <view class="block-text-content-cen">
                <van-row text="8">
                  <van-col text="14">
                    <van-field v-model="value" placeholder="添加评论......" @keyup.enter="insertComment" class="block-text-content-cen-input"/>
                  </van-col>
                  <van-col text="8">
                    <van-row style="margin-left: 20px;">
                      <van-col text="100" style="margin-right: 10px;">
                        <view align="center" style="padding-top: 0.3rem;">
                          <view><van-icon name="like-o" color="#ffffff" size="16"/></view>
                          <view style="font-size: 1rem">{{this.drawing.galleryInfoFabulous}}</view>
                        </view>
                      </van-col>
                      <van-col text="8" style="margin-right: 10px;">
                        <view align="center" style="padding-top: 0.3rem">
                          <view><van-icon name="star-o" color="#ffffff" size="16"/></view>
                          <view style="font-size: 1rem">{{this.drawing.galleryInfoCollection}}</view>
                        </view>
                      </van-col>
                      <van-col text="8" style="margin-right: 10px;">
                        <view align="center" style="padding-top: 0.3rem" @click="showPopup">
                          <view><van-icon name="chat-o" color="#ffffff" size="16"/></view>
                          <view style="font-size: 1rem">{{this.drawing.galleryInfoReply}}</view>
                        </view>
                      </van-col>
                    </van-row>
                  </van-col>
                </van-row>
              </view>
            </view>

            <van-popup v-model="showP" closeable position="bottom" :style="{ height: '60%' }">
              <view class="block-share">
                <view class="block-share-top">
                  <view>全部评论{{this.galleryComment.length}}条</view>
                </view>
                <view class="block-share-list">
                  <view class="block-share-list-demo" v-for="comment in galleryComment">
                    <img src="https://img.yzcdn.cn/vant/logo.png">
                    <view class="list-demo-content">
                      <view>
                        <h3>{{comment.customerInfo.customerName}}</h3>
                        <view>{{comment.galleryCommentTime}}</view>
                      </view>
                      <view style="width: 70%;font-size: 0.7rem">{{comment.galleryCommentText}}</view>
                    </view>
                    <view class="block-share-list-like">
                      <van-icon name="like-o"/>
                      <text class="block-share-list-likes" style="font-size: 0.8rem">{{comment.galleryCommentFabulous}}</text>
                    </view>
                  </view>
                </view>
                <view class="block-share-bottom">
                  <van-cell-group>
                    <van-field v-model="commentText" clearable label="" left-icon="edit" placeholder="评论一下~" center style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem" @keyup.enter="addComment" @click-left-icon="addComment"/>
                  </van-cell-group>
                </view>
              </view>
            </van-popup>
          </view>
        </view>
      </van-overlay>
    </view>
</template>

<script>

  import { Toast } from "vant";
  import {
    selectGalleryList,
    selectGalleryById,
    selectGalleryComment,
    insertGalleryComment
  } from "@/api/gallery/gallery.js";

  export default {
    name: "gallery_drawing",
    inject:['reload'],
    data(){
      return{
        show: false,
        value: '',
        showP: false,
        drawing: Object,
        galleryId: '',
        commentText:'',
        galleryComment: [],
        drawingList : [],
      }
    },
    created() {
      this.getGalleryList();
    },
    methods: {
      getGalleryList(){
        selectGalleryList("0").then((res) => {
          this.drawingList = res.data.data;
        });
      },
      showOverlay(galleryInfoId){
        this.show = true;
        selectGalleryById(galleryInfoId).then((res) => {
          console.log(res.data.data)
          this.galleryId = res.data.data.galleryInfoId;
          this.drawing = res.data.data.galleryInfo;
        });
      },
      showPopup() {
        this.showP = true;
        selectGalleryComment(this.galleryId).then((res) => {
          this.galleryComment = res.data.data;
        });
      },
      toText(){
        //this.$router.push({ path:'/original_text',query:{galleryInfoId:this.galleryId}})
		uni.navigateTo({
			url:"/pages/original_text/original_text?galleryInfoId="+this.galleryId
		})
      },
      /** 添加评论 */
      addComment(){
        insertGalleryComment(this.galleryId,this.commentText).then((res) =>{
          if(res.code == 500){
            Toast("评论失败");
          }else{
            Toast("评论成功");
            this.reload();
          }
        })
      },
      insertComment(){
        insertGalleryComment(this.galleryId,this.value).then((res) =>{
          if(res.code == 500){
            Toast("评论失败");
          }else{
            Toast("评论成功");
            this.reload();
          }
        })
      }
    }
  }
</script>

<style scoped>
  .gallery-van-tab-aa{
    padding-bottom: 0.5rem;
  }
  .gallery-van-tab-b-contents{
    position: relative;
  }
  .van-tab-b-contents{
    display :inline-block;
  }
  .gallery-van-tab-aa-block{
    display: inline-block;
    width: 44%;
    position: relative;
    padding : 0.5rem
  }

  .block-text-img{
    margin-top: 10rem;
  }
  .block-text-content-cen-input{
    border-radius: 5rem;
    width: 10rem;
  }
  .block-text-content{
    color: white;
    font-size: 0.6rem;
    padding: 1rem;
    position: absolute;
    width: 100%;
    bottom: 5%;
  }
  .block-text-content-p p{
    padding: 0.3rem 0;
  }

  .block-share {
    width: 100%;
    height: 70%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    padding: 1rem 1rem 3.125rem 1rem;
    overflow: auto;
    text-align: left;
  }

  .block-share .block-share-top{
    padding-left: 1rem;
    font-weight: 700;
  }

  .block-share .block-share-bottom{
    width: 85%;
    position: fixed;
    bottom: 0rem;
    padding: 0.7rem;
    background-color: white;
  }

  .block-share .block-share-list{
    padding: 1rem 1.5rem;
  }

  .block-share .block-share-list .block-share-list-demo{
    padding: 1rem 0;
    position: relative;
  }

  .block-share .block-share-list .block-share-list-demo{
    margin-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo{
    padding-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo .block-share-list-demos img{
    width: 1rem;
    height: 1rem;
  }

  .block-share .block-share-list .block-share-list-demo img{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    float: left;
    margin: 0;
  }
  .block-share .block-share-list .list-demo-content{
    margin-left: 0.5rem;
    width: 70%;
    display: inline-block;
  }
  .block-share .block-share-list .list-demo-content view{
    padding-bottom: 0.5rem;
  }
  .block-share .block-share-list .list-demo-content view h3{
    font-size: 0.75rem;
  }
  .block-share .block-share-list .list-demo-content view p{
    font-size: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-like{
    display: inline-block;
  }

</style>
